<template>
	<view class="page">
		<view class="head-bg">
			<view class="bg-box">
				<!-- <image :src="getAssets(`@/static/static-online/coupon/bg-coupon-center.jpg`)" mode=""></image> -->
				<image src="@/static/static-online/coupon/bg-coupon-center.jpg" mode=""></image>
			</view>
		</view>


		<view class="page-ctx">
			<!-- <w_fill_block height="100"></w_fill_block> -->

			<view class="coupon-wrap">
				<view class="coupon-group">
					<view class="list-box">
						<view class="coupon-list">
							<view class="coupon-item" v-for="(item,index) in coupons" :key="index">
								<view class="top-box flex-between">
									<view class="title-box">
										<view class="title">
											{{item.title}}
										</view>
										<view class="date">
											有效期为：{{ item.startTime }}至{{item.endTime}}
										</view>
									</view>
									<view class="price-box">
										<view class="price-info">
											<text class="huobi">
												￥
											</text>
											<text class="money">
												{{item.jian}}
											</text>
										</view>
										<view class="tiaojian">
											{{item.tiaojian}}
										</view>
									</view>
								</view>

								<view class="line-box">

								</view>

								<view class="bottom-box">
									<view class="btn-wrap flex-between">
										<view class="btn-rule flex" @click="toggle_expand(item)">
											<view class="text">
												使用规则
											</view>
											<view class="sanjiao">
												<u-icon v-if="item.is_expand" name="arrow-up-fill" color="#000000" size="10"></u-icon>
												<u-icon v-else name="arrow-down-fill" color="#000000" size="10"></u-icon>
											</view>
										</view>
										<view class="btn-pick">
											<view class="btn flex-center" @click="doCouponPick(item)"
												:class="{picked: item.if_ke_lingqu == 0 }">
												{{item.if_ke_lingqu == 1 ? '领取' : '已领取'}}
											</view>
										</view>
									</view>
									<view class="content-wrap" v-if="item.is_expand">
										{{item.content}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				coupon_seledt: {},
				coupons: [],
				count: 0,
				pagination: {
					page: 1,
					pageNum: 10
				},
				loadmore_status: 'loadmore', //loadmore  / loading / nomore
			}
		},
		onLoad(option) {
			this.showLoading();
			this.setView();
		},
		onShow() {

		},
		onHide() {},

		onPullDownRefresh() {

		},
		onReachBottom() {
			this.loadMore()
		},
		methods: {
			loadMore() {
				if (this.loadmore_status == 'loadmore') {
					this.loadmore_status = 'loading'
					this.pagination.page++;
					this.query_coupon();
				}
			},
			initQuery() {
				this.coupons = [];
				this.pagination.page = 1;
				this.loadmore_status = 'loadmore'
			},

			setView() {
				this.query_coupon();
			},

			query_coupon() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'yhq_list',
						...this.pagination,
						type: 1,
						// scene: 0,//0全部 1未使用 2已使用 3已过期
					},
				}).then(res => {
					if (res.code == 200) {
						let list = res.data.list || []
						let count = res.data.count || 0;
						list.forEach(v => {
							this.handle_item_data(v)
						})

						this.coupons = this.coupons.concat(list);
						this.loadmore_status = count > this.coupons.length ? 'loadmore' : 'nomore';
					}
					this.hideLoading()
				})
			},


			handle_item_data(v) {
				v.is_expand = false;
				v.man = parseFloat(v.man);
				v.jian = parseFloat(v.money);
				v.tiaojian = v.man == 0 ? '无门槛' : `满${v.man}元可用`
			},

			doCouponPick(item) {
				this.$log('item', item)
				this.coupon_seledt = item;

				if (!this.mix_checkLogin()) {
					return
				}

				if (item.if_ke_lingqu == 0) {
					return
				}

				// return 
				this.mix_throttle(this.doCouponPickFn)
			},

			doCouponPickFn() {
				let item = this.coupon_seledt;
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'yhq_lingQu',
						id: item.id,
					},
				}).then(res => {
					this.$alert(res)
					if (res.code == 200) {
						let item_index = this.coupons.findIndex(v => v.id == item.id)
						item.if_ke_lingqu = 0;

						this.coupons.splice(item_index, 1, item)
					}
				})
			},

			toggle_expand(item) {
				item.is_expand = !item.is_expand
				let index = this.coupons.findIndex(v => v.id == item.id)
				this.coupons.splice(index, 1, item)
			}
		}
	}
</script>




<style lang="scss">
	page {
		background: #F8F8F8;
	}
</style>

<style lang="scss" scoped>
	// .head-tabs {
	// 	position: fixed;
	// 	z-index: 10;
	// 	top: 0;
	// 	left: 0;
	// 	right: 0;
	// 	background: #fff;
	// }


	.head-bg {
		width: 100%;
		height: 264rpx;

		.bg-box {
			width: 100%;
			height: 264rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.page-ctx {
		position: relative;
		z-index: 2;
		padding: 24rpx 32rpx;

	}



	.coupon-wrap {}

	.coupon-group {
		margin-bottom: 50rpx;



		.list-box {
			.coupon-list {
				.coupon-item {
					margin-bottom: 16rpx;
					position: relative;
					padding: 24rpx;
					background: #FFFFFF;
					border-radius: 8rpx 8rpx 8rpx 8rpx;

					.top-box {
						.title-box {
							.title {
								font-family: PingFang SC, PingFang SC;
								font-weight: bold;
								font-size: 28rpx;
								color: #000000;
							}

							.date {
								margin-top: 12rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #666666;
							}
						}

						.price-box {
							.price-info {
								text-align: right;

								.huobi {
									font-family: PingFang SC, PingFang SC;
									font-weight: bold;
									font-size: 28rpx;
									color: #FF0000;
								}

								.money {
									font-family: PingFang SC, PingFang SC;
									font-weight: bold;
									font-size: 48rpx;
									color: #FF0000;
								}
							}

							.tiaojian {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #000000;
							}
						}
					}

					.line-box {
						width: 639rpx;
						margin: 25rpx auto 32rpx;
						border-bottom: 1rpx dashed #E6E7EE;
					}

					.bottom-box {
						.btn-wrap {
							.btn-rule {
								.text {
									font-family: PingFang SC, PingFang SC;
									font-weight: 400;
									font-size: 28rpx;
									color: #000000;
								}

								.sanjiao {
									margin-left: 16rpx;
								}
							}

							.btn-pick {
								.btn {
									padding: 0 8rpx;
									min-width: 132rpx;
									height: 64rpx;
									background: #CB0011;
									border-radius: 32rpx 32rpx 32rpx 32rpx;
									font-family: PingFang SC, PingFang SC;
									font-weight: 400;
									font-size: 28rpx;
									color: #FFFFFF;

									&.picked {
										background: #dddddd;

									}
								}
							}
						}

						.content-wrap {
							margin-top: 20rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;

							white-space: break-spaces;
						}
					}

				}
			}
		}
	}
</style>